
// 悬浮框
const li = document.querySelectorAll("li");
const fd = document.querySelectorAll(".fd");

console.log(li);
console.log(fd);
li[5].onmouseover = function(){
    // 第一块级 完成
    li[4].style.flexGrow='0';
    fd[0].style.display='none';
    // 第三块级 完成
    li[6].style.flexGrow='0';
    fd[2].style.display='none';
    // 第四块级 完成
    li[7].style.flexGrow='0';
    fd[3].style.display='none';
    // 自生发生改变
    li[5].style.flexGrow='1';
    fd[1].style.display='block';
    fd[1].style.width='100%';
}
li[4].onmouseover = function(){
    // 第一块级 完成
    li[5].style.flexGrow='0';
    fd[1].style.display='none';
    // 第三块级 完成
    li[6].style.flexGrow='0';
    fd[2].style.display='none';
    // 第四块级 完成
    li[7].style.flexGrow='0';
    fd[3].style.display='none';
    // 自生发生改变
    li[4].style.flexGrow='1';
    fd[0].style.display='block';
    fd[0].style.width='100%';
}
li[6].onmouseover = function(){
    // 第一块级 完成
    li[5].style.flexGrow='0';
    fd[1].style.display='none';
    // 第三块级 完成
    li[4].style.flexGrow='0';
    fd[0].style.display='none';
    // 第四块级 完成
    li[7].style.flexGrow='0';
    fd[3].style.display='none';
    // 自生发生改变
    li[6].style.flexGrow='1';
    fd[2].style.display='block';
    fd[2].style.width='100%';
}
li[7].onmouseover = function(){
    // 第一块级 完成
    li[5].style.flexGrow='0';
    fd[1].style.display='none';
    // 第三块级 完成
    li[4].style.flexGrow='0';
    fd[0].style.display='none';
    // 第四块级 完成
    li[6].style.flexGrow='0';
    fd[2].style.display='none';
    // 自生发生改变
    li[7].style.flexGrow='1';
    fd[3].style.display='block';
    fd[3].style.width='100%';
}

